<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            font-size: 20px;
        }
        table{
            width: 1000px;
            margin: 50px auto;
            border-collapse: collapse;
        }
        th,td{
            border: 1px red solid;
            text-align: center;
        }
        button{
            margin: 5px;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>爱好</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <script>
        (function(){
            arr1 = [
            {
                xihao : "1",
                name : "kky",
                age : "15",
                sex :"男",
                aihao : "学习"
            }, {
                xihao : "2",
                name : "kky2",
                age : "15",
                sex :"男",
                aihao : "追剧"
            }, {
                xihao : "3",
                name : "kky3",
                age : "15",
                sex :"男",
                aihao : "看小说"
            }, {
                xihao : "4",
                name : "kky4",
                age : "15",
                sex :"男",
                aihao : "打游戏"
            }, {
                xihao : "5",
                name : "kky5",
                age : "15",
                sex :"男",
                aihao : "敲代码"
            }    
            ]
            var obj2={
                arr1:arr1
            }

            if(!localStorage.obj2){
                localStorage.obj2=JSON.stringify(obj2);
            }
        }());
        var tbody = document.querySelector("tbody");
        var obj1 = JSON.parse(localStorage.obj2);
        console.log("obj1 ",obj1 );
        show();
        function show(){
            var str = '';
            for(var i = 0 ; i < obj1.arr1.length ; i++){
                str += `
                    <tr>
                    <td>${obj1.arr1[i].xihao}</td>
                    <td>${obj1.arr1[i].name}</td>
                    <td>${obj1.arr1[i].age}</td>
                    <td>${obj1.arr1[i].sex}</td>
                    <td>${obj1.arr1[i].aihao}</td>
                    <td>
                        <button onclick="shang(${obj1.arr1[i].xihao})">上移</button>
                        <button onclick="del(${obj1.arr1[i].xihao})">删除</button>
                        <button onclick="xia(${obj1.arr1[i].xihao})">下移</button>
                    </td>
                </tr>
                `
            }
            tbody.innerHTML = str;
        }

        //删除
        function del(id){
            for(var i = 0 ; i < obj1.arr1.length ; i++){
                if(id == obj1.arr1[i].xihao){
                    obj1.arr1.splice(i,1);
                }
            }
            localStorage.obj1 = JSON.stringify(obj1);
            show();
        }

        /* //上移功能
        var dd = {};
        var d;
        function shang(id) {
            for (var i = 0; i < obj1.arr1.length; i++) {
                if (id == obj1.arr1[i].xihao) {
                    if (i == 0) {
                        this.disabled = true;
                    } else {
                        d = i - 1;
                        dd = obj1.arr1[i];
                        obj1.arr1[i] = obj1.arr1[d];
                        obj1.arr1[d] = dd;
                        localStorage.obj1 = JSON.stringify(obj1);
                        show();
                        break;
                    }
                }
            }

        //下移功能
        var uu = {};
        var u;
        function xia(id) {
            for (var i = 0; i < obj1.arr1.length; i++) {
                if (id == obj1.arr1[i].xihao) {
                    if (i == obj1.arr1.length - 1) {
                        this.disabled = true;
                    } else {
                        u = i + 1;
                        uu = obj1.arr1[i];
                        obj1.arr1[i] = obj1.arr1[u];
                        obj1.arr1[u] = uu;
                        localStorage.obj1 = JSON.stringify(obj1);
                        show();
                        break;
                    }
                }
            }
        } */

        //下移
        var abc = {};
        var a;
        function xia(id) {
            for (var i = 0; i < obj1.arr1.length; i++) {
                if (id == obj1.arr1[i].xihao) {
                    if (i == obj1.arr1.length - 1) {
                        this.disabled = true;
                    } else {
                        a = i + 1;
                        abc = obj1.arr1[i];
                        obj1.arr1[i] = obj1.arr1[a];
                        obj1.arr1[a] = abc;
                        localStorage.obj1 = JSON.stringify(obj1);
                        show();
                        break;
                    }
                }
            }
        }
        //上移
        var bcd = {};
        var b;
        function shang(id) {
            for (var i = 0; i < obj1.arr1.length; i++) {
                if (id == obj1.arr1[i].xihao) {
                    if (i == 0) {
                        this.disabled = true;
                    } else {
                        b = i - 1;
                        abc = obj1.arr1[i];
                        obj1.arr1[i] = obj1.arr1[b];
                        obj1.arr1[b] = abc;
                        localStorage.obj1 = JSON.stringify(obj1);
                        show();
                        break;
                    }
                }
            }
        }
        
    </script>
</body>
</html>